@import 'office-ui-fabric-react/dist/sass/variables/_Color.Variables.scss';
.sidebar {
  :global {
    .ms-Nav-compositeLink {
      background-color: transparent;
      &.is-selected {
        .ms-Nav-link {
          background-color: transparent;
        }
      }
      &:hover {
        .ms-Nav-link {
          background-color: rgba(255, 255, 255, 0.2);
          color: $ms-color-white;
        }
        .ms-Nav-chevronButton {
          background-color: transparent;
        }
      }
    }
    .ms-Nav-link {
      color: $ms-color-white;
      background-color: transparent;
      padding-left: 0.6em;
      font-size: 12pt;
      height: 40px;
      line-height: 40px;
      &:hover {
        background-color: transparent;
        .ms-Button-icon {
          color: $ms-color-white;
        }
      }
      &:after {
        border-left-color: $ms-color-white;
        border-left-width: 3px;
        left: 1px;
      }
    }
    .ms-Nav-groupContent
      > .ms-Nav-navItems
      > .ms-Nav-navItem
      > .ms-Nav-compositeLink
      > .ms-Nav-link {
      font-size: 12pt;
    }
    .ms-Button-icon {
      color: $ms-color-white;
      font-size: 12pt;
      margin-right: 0.8em;
    }
    .ms-Nav-chevronButton {
      left: auto;
      right: 1em;
      .ms-Nav-chevron {
        color: $ms-color-white;
      }
    }
    .ms-Nav-groupContent > .ms-Nav-navItems > .ms-Nav-navItem {
      margin-bottom: 0.6em;
    }
  }
}
